import React from 'react';
import { WeaInputLocale, WeaDraggable, WeaSlideModal, WeaAlertPage, WeaLocaleProvider } from 'ecCom';
import { inject, observer } from 'mobx-react';
import { Menu, Anchor, BackTop, Spin, Affix, Row, Col, Button } from 'antd';
import ApiSingleShow from './../ApiSingleShow';
import ApiMenu from './../ApiMenu';
import ApiSlideModal from './../ApiSlideModal';
import WeaRightLeftLayout from './../../comp/weaCrmRightLeft';
import ApiGroupShowStore from './../../../stores/apiStore/ApiGroupShowStore';
import Templet1 from './../apiShowTemp/Templet1';

const SubMenu = Menu.SubMenu;
const getCurrentLabel = WeaInputLocale.getCurrentLabel;// 过滤多语言字符串
const getLabel = WeaLocaleProvider.getLabel;// 获取多语言
@observer
export default class ApiShowGroup extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      current: '',
      store: new ApiGroupShowStore(),
    };
  }

  componentWillMount() {
    const { getApiMenu } = this.state.store;
    getApiMenu(this.props);
  }

    render = () => {
      const { groups, InitGroupInfo, groupId, disabled, loading } = this.state.store;
      const { visible } = this.state;
      return (
        <div className="api_group_menu">
          {loading ? <div className="crm-api-span"><Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@0azka7`} spinning={loading} size="large" tip={getLabel(384470, '正在读取数据...')} /> </div> : ''}
          {groups.length > 0 && <ApiMenu
            ecId={`${this && this.props && this.props.ecId || ''}_ApiMenu@f56t6e`}
            groups={groups}
            InitGroupInfo={InitGroupInfo}
            scrollToAnchor={this.scrollToAnchor}
            current={groups[0].item[0].itemId}
            disabled={disabled}
          />}

          {
            disabled ?
              <div className="api_showGroup" ref="container">
                {this.getAll()}
              </div> :
              <WeaRightLeftLayout
                ecId={`${this && this.props && this.props.ecId || ''}_WeaRightLeftLayout@x9wocg`}
                ref="RLlayout"
                defaultShowLeft
                type={10}
                leftCom={
                  <div className="api_showGroup" ref="container">
                    {this.getAll()}
                  </div>
                }
              >
                <ApiSlideModal
                  ecId={`${this && this.props && this.props.ecId || ''}_ApiSlideModal@mwh1j9`}
                  groups={groups}
                  groupId={groupId}
                  scrollToAnchor={this.scrollToAnchor}
                  visible={visible}
                  setVisable={this.setVisable}
                />
              </WeaRightLeftLayout>
          }

        </div >
      );
    }
    setVisable = () => {
      this.setState({ visible: false });
    }
    getAll = () => {
      const { info, requestParam, module, disabled, params } = this.state.store;

      if (disabled) {
        return (
          <Templet1
            ecId={`${this && this.props && this.props.ecId || ''}_Templet1@28te8z`}
            params={{ apiId: '542c2f9e498a4392a5ed221ab91b541d', query: JSON.stringify(requestParam) }}
            showAlertIcon
            name={getLabel('511140', '企业名称模糊匹配列表')}
            showAlertIcon={false}
            fuzzyMatchList
            fuzzyMatchParas={params}
          />
        );
      }
      const base = [];
      info.map((inf, i) => {
        const front_path = inf.front_path;
        base.push(
          <div className="crm_api_showGroup_single">
            <ApiSingleShow
              ecId={`${this && this.props && this.props.ecId || ''}_ApiSingleShow@si8faw@${i}`}
              requestParam={requestParam}
              frontPath={front_path}
              showAlertIcon={false}
              showSpin={false}
              nameLink="3"
            />
          </div>,
        );
      });
      return base;
    }
    // 滚动到锚点
    scrollToAnchor = (id) => {
      const { onClickMenuItem } = this.state.store;
      this.setState({ current: id });
      if (id) {
        // 找到锚点
        const anchorElement = document.getElementById(id);
        // 如果对应id的锚点存在，就跳转到锚点
        if (anchorElement) {
          anchorElement.scrollIntoView({ block: 'start', behavior: 'smooth' });
        } else {
          onClickMenuItem(id);
        }
      }
    }
}
